import React, { useState } from 'react';
import './App.less';
import { Button } from 'antd'
import { useSelector, useDispatch } from "react-redux"
import { routerSwitch } from './store/actions'

import UpdataPage from './pages/updata'
import EditPage from './pages/editPage'
import IndexPage from './pages/index'
import Error from './pages/error'
const App = () => {
  const [layoutsType, setLayoutsType] = useState(true)
  const dispath = useDispatch()
  let layoutsList = useSelector((state: any) => state.layoutsData)
  const { routerData, defaultRouter, ParentRouter } = layoutsList
  const menRender = (parms: any) => {
    return (
      <div
        className={["menNav", parms?.path === defaultRouter ? "checkedDOm" : "nullcheckedDOm"].join(' ')}
        onClick={() => { checkRouter(parms.path) }}
        key={parms?.name}>
        {parms?.name}
      </div>
    )
  }
  const onMouseOverNav = (e: any, type: string) => {
    let IdTarget = e.target.id
    let domNode = document.getElementById(IdTarget)
    if (domNode) {
      if (type === 'over') {
        domNode.style.overflow = "unset"
        domNode.style.height = "auto"
      } else {
        domNode.style.overflow = "hidden"
        domNode.style.height = "40px"
      }
    }
  }
  const makeidNumber = (length: number) => {
    var result = '';
    var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    var charactersLength = characters.length;
    for (var i = 0; i < length; i++) {
      result += characters.charAt(Math.floor(Math.random() * charactersLength));
    } return result;
  };
  const SubMenuRender = (parms: any) => {
    return (
      <div
        id={makeidNumber(8)}
        key={parms?.name}
        className={["SubmenNav", "aloneStyle", parms?.path === ParentRouter ? "checkedParent" : null].join(' ')}
        onMouseEnter={(e: any) => { onMouseOverNav(e, 'over') }}
        onMouseLeave={(e: any) => { onMouseOverNav(e, 'out') }}
      >
        {parms.name}
        {parms.children && parms.children.length && parms.children.map((item: any) => {
          return (
            item.children ? SubMenuRender(item) : menRender(item)
          )
        })}
      </div>
    )
  }
  const checkRouter = (parms: any) => {
    dispath(routerSwitch(parms))
  }
  const contentText = () => {
    switch (defaultRouter) {
      case '/': {
        return <IndexPage />
      }
      case '/docs/editPage': {
        return <EditPage />
      }
      case '/docs/updataPage': {
        return <UpdataPage />
      }
      case '/docsTwo': {
        return <IndexPage />
      }
      case '': {
        return <IndexPage />
      }
      default: {
        return <Error />
      }
    }
  }
  return (
    <div className="AppDOM">
      <div className="layoutsRouter" style={{ display: layoutsType ? 'block' : 'none' }}>
        {routerData && routerData.length && routerData.map((item: any) => {
          return (item.children ? SubMenuRender(item) : menRender(item))
        })}
      </div>
      <div className="appBody">
        <div className="headerContent">
          <Button onClick={() => { setLayoutsType(!layoutsType) }}>{layoutsType ? '折叠' : "展开"}菜单</Button>
        </div>
        <div className="content">
          {contentText()}
        </div>
      </div>
    </div>
  );
}

export default App;
